<template>
	<view class="order-set">
		<uni-forms :modelValue="formData">
			<view class="ban">
				<uni-forms-item required label="姓名" name="username">
					<input inputBorder="false" class="no-border-input" type="text" v-model="formData.username" :styles="styles" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item required label="排序号" name="order_num">
					<input inputBorder="false" class="no-border-input" type="text" v-model="formData.order_num" :styles="styles" placeholder="请输入排序号" />
				</uni-forms-item>
				<uni-forms-item required label="取消设置" label-width="100px">
					
					<uni-data-picker  placeholder="请选择"
						popup-title="请选择" :localdata="dataTree" 
						v-model="formData.isCancel" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
						<text> {{(formData.isCancel[0]||formData.isCancel)==1?'随时可取消':'不可以取消'}} ></text>
					</uni-data-picker>

				</uni-forms-item>
			</view>
			<view class="ban1" @click="goSetTime">
				<uni-forms-item required label="预约时段排期设置" label-width="150px">
					<!-- <text>{{selectedList.length}}{{useableDay}}天可约 ></text> -->
					<text>{{useableDay.length}}天可约 ></text>
				</uni-forms-item>
			</view>
			
			<view class="ban2">
				<uni-forms-item required label="家政员登录手机" name="price" label-width="140px">
					<input type="text" placeholder="请填写登录手机号码" v-model="formData.phone">
				</uni-forms-item>
				<uni-forms-item required label="家政员登录密码" name="price" label-width="140px">
					<input type="text" placeholder="请填写登录密码" v-model="formData.password">
				</uni-forms-item>
			</view>
			
			<view class="ban2">
				<uni-forms-item required label="服务价格" name="price" label-width="100px">
					<view class="df" style="width: 200rpx;text-align: right;">
						<input type="text" placeholder="请输入价格" v-model="formData.price"><text style="margin-left: 6rpx;"> 元</text>
					</view>
				</uni-forms-item>
				<uni-forms-item required label="学历" name="school">
					<uni-combox :border="false" :candidates="diploma" :placeholder="formData.school" v-model="formData.school"></uni-combox>
				</uni-forms-item>
				<uni-forms-item required label="等级" name="name">
					<uni-combox :border="false" :candidates="levelList" :placeholder="formData.level" v-model="formData.level"></uni-combox>
					<!-- <text>金牌 ></text> -->
				</uni-forms-item>
				<uni-forms-item required label="星级" name="name">
					<!-- <text>4星 ></text> -->
					<uni-combox :border="false" :candidates="starList" :placeholder="formData.star" v-model="formData.star"></uni-combox>
				</uni-forms-item>
				<uni-forms-item required name="certificate" label="证书">
					<text>至少选择2项</text>
				</uni-forms-item>
				<!-- <uni-forms-item> -->
					<view class="check-box">
						<uni-data-checkbox multiple v-model="formData.certificate" :localdata="certificateList" />
					</view>
				<!-- </uni-forms-item> -->
				<uni-forms-item required label="属相" name="name">
					<uni-combox :border="false" :candidates="birthYear" :placeholder="formData.birth_year" v-model="formData.birth_year"></uni-combox>
				</uni-forms-item>
				<uni-forms-item required label="民族" name="name">
					<uni-combox :border="false" :candidates="nationList" :placeholder="formData.nation" v-model="formData.nation"></uni-combox>
				</uni-forms-item>
				<uni-forms-item required label="年龄" style="display: flex;justify-content: flex-start;">
					<input type="text" placeholder="请输入年龄" v-model="formData.age">
				</uni-forms-item>
				<uni-forms-item required label="经验">
					<input type="text" placeholder="请输入经验时间" v-model="formData.experience">
				</uni-forms-item>
				<uni-forms-item required label="籍贯">
					<input type="text" placeholder="请输入籍贯" v-model="formData.native_place">
				</uni-forms-item>
				<uni-forms-item required label="特点标签" label-width="160rpx">
					
				</uni-forms-item>
				<uni-forms-item>
					<input type="text" placeholder="请输入标签" v-model="formData.disc">
					<view class="tip">
						多个标签请用逗号分隔开
					</view>
				</uni-forms-item>
				<uni-forms-item required label="封面图片上传(必填)" name="name" label-width="320rpx">
					<text>(每张不能超过10M)</text>
				</uni-forms-item>
				<uni-forms-item>
					<!-- <image src="../../static/uni.png" mode="" class="upload"></image> -->
					<view class="example-body">
						<uni-file-picker v-model="imageValue" 
							fileMediatype="image" 
							mode="grid" 
							@select="select" 
							@progress="progress" 
							@success="success" 
							@fail="fail"  limit="3" title="最多选择3张图片">
						</uni-file-picker>
					</view>
				</uni-forms-item>
			</view>
		</uni-forms>
		<button @click="submitForm">提交</button>
	</view>
</template>

<script>
	import { AddHelper, GetOrderNum } from '../../api/index.js'
	export default {
		data() {
			return {
				imageValue:[],
				formData:{
					username:'',
					order_num:0,
					isCancel:0,
					days:30,
					phone:'',
					password:'',
					price:100,
					school:'',
					level:'',
					star:'',
					certificate:[],
					birth_year:'',
					nation:'汉族',
					age:'',
					experience:'',
					native_place:'',
					disc:'',
					avatar:'',
					time:'',
					date_time:''
				},
				certificateList:[
					{text:'背调合格',value:'背调合格'},
					{text:'保证金已缴纳',value:'保证金已缴纳'},
					{text:'身份证',value:'身份证'},
					{text:'健康证',value:'健康证'},
					{text:'体检报告',value:'体检报告'},
					{text:'执业证书',value:'执业证书'}
				],
				styles:{
					// color: '#2979FF',
					borderColor: '#fff'
				},
				dataTree:[
					{text:'随时可以取消',value:1},
					{text:'不可以取消',value:0},
				],
				classes:'',
				levelList: ['金牌','银牌'],
				diploma:['小学','初中','高中','职高','专科','本科','研究生'],
				starList:['0星','1星','2星','3星','4星','5星'],
				birthYear:['鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪'],
				nationList:['汉族','回族','藏族','苗族','壮族','傣族','少数民族'],
				item:{},
				selectedList:[]
				
				
			};
		},
		methods:{
			async getOrderNum() {
				const {data:res} = await GetOrderNum()
				console.log(res,'getnum')
				this.formData.order_num = res.data.order_num+1
			},
			// / 获取上传状态
			select(e){
				console.log('选择文件：',e)
				let that = this
				uni.uploadFile({
					url:'http://localhost:3002/api/helper/upload',
					name:'file',
					filePath:e.tempFilePaths[0],
					success(res) {
						console.log(res,'res')
						console.log(JSON.parse(res.data),'resss')
						console.log(this,'this')
						console.log(that,'that')
						that.formData.avatar = JSON.parse(res.data).url
					}
				})
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			
			// 上传成功
			success(e){
				console.log(e,'上传成功')
			},
			
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
			goSetTime(){
				let date_time = this.useableDay
				if(this.formData.id){
					return uni.navigateTo({
						url:`/subPackageAdmin/TimeSet/TimeSet?date_time=${date_time}&&time=${JSON.stringify(this.timeDuration)}`
					})
				}
				uni.navigateTo({
					url:`/subPackageAdmin/TimeSet/TimeSet?date_time=${date_time}`
				})
			},
			getValue(e){
				console.log(e,'yemian')
				this.selectedList = e.selected
				// this.formData.date_time = 
				let dateTimeStr = ''
				let timeStr = ''
				e.selected.forEach(item=>{
					dateTimeStr += item.date+'*'+item.info+','
				})
				e.time.forEach(item=>{
					timeStr += item.start+'-'+item.end+'*'+item.status+','
				})
				console.log(dateTimeStr,'datetimestr')
				this.formData.date_time = dateTimeStr
				
				this.formData.time = timeStr
				console.log(timeStr,'timestr')
			},
			async submitForm(){
				console.log(this.formData)
				this.formData.certificate=this.formData.certificate.join(',')
				const { data:res } = await AddHelper(this.formData)
				console.log(res,'hhhh')
				
			},
			onnodeclick(e) {
							console.log(e,'onnodeclick');
						},
						onpopupopened(e) {
							console.log(e,'popupopened','onpopupopened');
						},
						onpopupclosed(e) {
							console.log(e,'popupclosed');
						},
						onchange(e) {
							console.log('onchange:', e.detail.value[0].value);
							this.formData.isCancel = e.detail.value[0].value
						}
			
		},
		onLoad(options) {
			console.log(options.item,'ooppp')
			
			if(options.item){
				
				this.formData = JSON.parse(options.item||'')
				this.formData.isCancel = [JSON.parse(options.item||'').isCancel]
				this.formData.certificate = JSON.parse(options.item||'').certificate.split(',')
				this.imageValue = [{url:JSON.parse(options.item||'').avatar}]
			}else{
				this.getOrderNum()
			}
			
		},
		computed:{
			useableDay(){
				let arr = this.formData.date_time.slice(0,this.formData.date_time.length-1).split(',')
				let res = arr.map(item=>{
					return item.split('*')[0]
				})
				console.log(res,'ffres')
				return res
			},
			timeDuration(){
				
				let arrtime = this.formData.time.slice(0,this.formData.time.length-1).split(',')
				let ress = arrtime.map(item=>{
					console.log(item,'iiitt')
					let status = item.split('-')[1]?.split('*')[1]
					let obj = {start:item.split('-')[0],end:item.split('-')[1]?.split('*')[0],status}
					return obj
				})
				console.log(ress,'ffrestime')
				return ress
				
				
			}
		}
	}
</script>

<style lang="scss">
	.example-body{
		margin: 20rpx 0;
		padding-bottom: 10rpx;
		.uni-file-picker{
			width: 400rpx;
			// height: 200rpx;
		}
		.icon-del-box{
			width: 30rpx;
			height: 30rpx;
			.icon-del{
				width: 20rpx;
			}
			
		}
	}
	.no-border-input:focus {
	    border: none; /* 去掉边框 */
	    outline: none; /* 去掉聚焦时的轮廓 */
	  }
	  .is-input-border{
		  border: none;
	  }
.order-set{
	padding: 20rpx;
	.uni-forms{
		// background: #fff;
		padding: 20rpx;
		.ban{
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			.uni-forms-item:nth-child(1){
				display: flex;
				justify-content: flex-start;
				.no-border-input:focus {
				    border: none; /* 去掉边框 */
				    outline: none; /* 去掉聚焦时的轮廓 */
				  }
			}
			.no-border-input:focus {
			    border: none; /* 去掉边框 */
			    outline: none; /* 去掉聚焦时的轮廓 */
			  }
			
		}
		.ban1{
			background: #FFFACD;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
		.ban2{
			background: #fff;
			border-radius: 10rpx;
			.uni-forms-item:nth-child(1){
				display: flex;
				justify-content: flex-start;
				// border: 1px solid #000;
				
			}
			.uni-forms-item:nth-last-child(1){
				display: flex;
				justify-content: flex-start;
			}
			.uni-forms-item:nth-last-child(3){
				display: flex;
				justify-content: flex-start;
				.tip{
					font-size: 28rpx;
					color: #888;
					margin-top: 10rpx;
				}
			}
			.uni-forms-item:nth-last-child(5){
				display: flex;
				justify-content: flex-start;
			}
			.uni-forms-item:nth-last-child(6){
				display: flex;
				justify-content: flex-start;
			}
			.uni-forms-item:nth-last-child(7){
				display: flex;
				justify-content: flex-start;
			}
		}
		.uni-forms-item{
			border-bottom: 1px solid #eee;
			margin-bottom: 10rpx;
			// border: 1px solid #000;
			padding: 0 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// flex-wrap: wrap;
			.uni-forms-item__content{
				flex: none;
			}
			.uni-forms-item__label{
				font-weight: 800;
			}
			.red{
				color: red;
			}
			
		}
		.check-box{
			display: flex!important;
			flex-wrap: wrap!important;
			padding: 10rpx 20rpx;
			border-bottom: 1px solid #eee;
		}
		.uni-combox{
			width: 100rpx;
		}
	}
	.upload{
		width: 100rpx;
		height: 100rpx;
	}
	button{
		width: 70%;
		line-height: 60rpx;
		height: 60rpx;
		background: #1E90FF;
		margin-top: 30rpx;
		color: #fff;
	}
}
</style>
